<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { WINDOW_STYLE_CONSTANTS } from '~shared/constants/layout'
import { useSidebarStore } from '@/windows/layoutBrowser/stores/sidebar'
import AddTabBtn from '../common/AddTabBtn.vue'
import SidebarTabItem from './SidebarTabItem.vue'
import EdgeMainMenu from './EdgeMainMenu.vue'
import { mdiDotsVertical, mdiUpload } from '@mdi/js'
import { getSystemTab } from '~shared/utils/tab'
import { TAB_IDS } from '~shared/constants'
import { createRuntimeState } from 'global-state'
import type { updateInfo } from '~types/updater'
const updateStatus = createRuntimeState<updateInfo>('updateStatus', { status: '未检测' })

const { t } = useI18n()
const sidebarStore = useSidebarStore()
const { TOP_HEIGHT, SEARCH_BAR_HEIGHT } = WINDOW_STYLE_CONSTANTS

const styles = {
  top: TOP_HEIGHT - SEARCH_BAR_HEIGHT + 'px',
  width: WINDOW_STYLE_CONSTANTS.RIGHT_WIDTH - 1 + 'px'
}

function openUpdater() {
  _pre_.browser.addTab(getSystemTab(TAB_IDS.UPDATER), 'right')
}
</script>

<template>
  <v-list
    class="position-absolute right-sidebar d-flex flex-column pb-10"
    data-testid="position-absolute-right-sidebar"
    style="padding: 0"
    :style="styles"
  >
    <!-- Top half: fixed tabs -->
    <div class="d-flex flex-column flex-1-1-0" style="min-height: 0">
      <v-btn
        v-if="updateStatus.state.status === '有新版' || updateStatus.state.status === '下载完成'"
        class="my-2"
        color="warning"
        density="compact"
        :icon="mdiUpload"
        size="small"
        style="margin-left: 10px"
        variant="flat"
        @click="openUpdater"
      />
      <EdgeMainMenu>
        <template #activator="{ props }">
          <v-btn
            class="my-2"
            color=""
            data-testid="right-sidebar-menu-btn"
            density="compact"
            v-bind="props"
            :icon="mdiDotsVertical"
            size="small"
            style="margin-left: 10px"
            :title="t('sidebar.menu')"
            variant="text"
          />
        </template>
      </EdgeMainMenu>
      <v-divider />

      <!-- Scrollable fixed tabs list -->
      <div style="overflow-y: auto">
        <v-slide-y-reverse-transition group hide-on-leave>
          <SidebarTabItem
            v-for="(sidebar, index) of sidebarStore.rightTabs"
            :key="sidebar.origin.id"
            :active="sidebarStore.rightActiveIds.includes(sidebar.origin.id)"
            class="my-1"
            :data-testid="`right-sidebar-tab-item-${index}`"
            icon-size="17"
            :index="index"
            is-right
            :tab="sidebar.origin"
            :web-contents-id="sidebar.data?.webContentsId"
          />
        </v-slide-y-reverse-transition>
        <v-divider class="my-1" />
        <AddTabBtn class="mt-2" direction="right" :icon-size="20" />
      </div>
    </div>

    <!-- Bottom half: temporary tabs -->
    <div class="d-flex flex-column flex-0-0" style="min-height: 0; overflow-y: auto">
      <v-sheet class="mx-1" color="surface" rounded="lg">
        <SidebarTabItem
          v-for="(sidebar, index) of sidebarStore.rightTempTabs"
          :key="sidebar.id"
          :active="sidebarStore.rightActiveIds.includes(sidebar.id)"
          class="my-1"
          icon-size="17"
          :index="index"
          is-right
          no-drag
          :tab="sidebar"
          :web-contents-id="sidebar.webContentsId"
        />
      </v-sheet>
    </div>
  </v-list>
</template>

<style scoped>
.right-sidebar {
  margin-right: 1px;
  bottom: 0;
  right: 0;
  background: rgb(var(--v-theme-tab-active));
}
</style>

<i18n>
{
  "zhHans": {
    "sidebar": {
      "menu": "菜单"
    }
  },
  "en": {
    "sidebar": {
      "menu": "Menu"
    }
  }
}
</i18n>
